<!-- 高端登录页 -->
<template>
  <div class="app-login">
    <div class="app-login-title">水中仙,镜中月</div>
    <!-- 播放mp3 -->
    <div class="app-login-detial">
      <p>生活如水，月光如影</p>
      <p style="margin-left: 50px">不负时光，不负韵律</p>
      <p style="margin-left: 100px">不负岁月，不负春风</p>
    </div>

    <video
      src="@/assets/image/背景.mp4"
      style="width: 100%; height: 100%; object-fit: cover"
      autoplay="autoplay"
      loop="loop"
      muted="muted"
    ></video>
    <div
      style="
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
      "
    ></div>
    <div class="login-box">
      <div class="login-register">
        <div class="title">注册</div>
        <div class="login-form">
          <div class="box">
            用户名：
            <input
              class="inp"
              v-model="form.username"
              placeholder="请输入用户名"
            />
          </div>
          <div class="box">
            密码：
            <input
              class="inp"
              v-model="form.password"
              placeholder="请输入密码"
            />
          </div>
          <div class="box">
            重复密码：
            <input class="inp" v-model="form.rpwd" placeholder="请输入密码" />
          </div>
          <button
            class="btn"
            style="position: absolute; bottom: 70px"
            @click="Register"
          >
            <div style="margin: 10px; width: 300px">注册</div>
          </button>
        </div>
      </div>
      <div class="login-login">
        <div class="title">登录</div>
        <div class="login-form">
          <div class="box">
            用户名：
            <input
              class="inp"
              placeholder="请输入用户名"
              v-model="form.username"
            />
          </div>
          <div class="box">
            密码：
            <input
              class="inp"
              placeholder="请输入密码"
              v-model="form.password"
            />
          </div>
          <button
            class="btn"
            style="position: absolute; bottom: 70px"
            @click="login"
          >
            <div style="margin: 10px; width: 300px">登录</div>
          </button>
        </div>
      </div>
      <div class="login-Mask">
        <button class="btn" v-show="showName == '注册'" @click="changeShowName">
          <div style="margin: 10px">还未注册？去注册一下。</div>
        </button>
        <button class="btn" v-show="showName == '登录'" @click="changeShowName">
          <div style="margin: 10px">已注册？去登陆</div>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { login, Register } from '@/api/login'
export default {
  name: "Login",
  data() {
    return {
      isplay: false,
      showName: '注册',
      form: {
        username: '',
        password: '',
        rpwd: ''
      },

    }
  },
  methods: {
    changeShowName() {
      this.showName = this.showName == '注册' ? '登录' : '注册'
      if (this.showName == '登录') {
        const res = document.querySelector('.login-Mask')
        res.style.left = '50%'
      } else {
        const res = document.querySelector('.login-Mask')
        res.style.left = 0
      }
    },
    login() {
      if (!this.form.username) {
        this.$message({
          type: 'error',
          message: '用户名不能为空'
        })
        return
      } else if (!this.form.password) {
        this.$message({
          type: 'error',
          message: '密码不能为空'
        })
        return
      }
      login({
        username: this.form.username,
        password: this.form.password
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '登录成功'
          })
          localStorage.setItem('token', res.token)
          localStorage.setItem('userId', res.id)
          localStorage.setItem('background', res.data.bg_url)
          localStorage.setItem('roles', res.data.roles)
          localStorage.setItem('avatar', res.data.avatar)
          localStorage.setItem('nickname', res.data.nickname)
          this.$router.push({
            path: '/'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    Register() {
      if (!this.form.username) {
        this.$message({
          type: 'error',
          message: '用户名不能为空'
        })
        return
      } else if (!this.form.password) {
        this.$message({
          type: 'error',
          message: '密码不能为空'
        })
        return
      } else if (!this.form.rpwd) {
        this.$message({
          type: 'error',
          message: '重复密码不能为空'
        })
        return
      }
      Register({
        username: this.form.username,
        password: this.form.password,
        rpwd: this.form.rpwd
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '恭喜你注册成功,请登录'
          })
          this.changeShowName()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 音乐播放
    playMusic() {
      if (!this.isplay) {
        this.$refs.audio.play()
        this.isplay = true
        console.log(this.isplay)
      } else {
        // 关闭
        this.$refs.audio.pause()
        this.isplay = false
        console.log(this.isplay)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.app-login {
  position: relative;

  .app-login-title {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    background: linear-gradient(
      to bottom,
      #b33f3f,
      #1a5a73,
      #260551,
      #850e59,
      #042d36
    );
    -webkit-background-clip: text;
    color: transparent;
  }

  .app-login-detial {
    position: fixed;
    top: 5%;
    left: 5%;
    font-size: 25px;
    background: linear-gradient(
      to bottom,
      #b33f3f,
      #1a5a73,
      #054851,
      #0e7785,
      #042d36
    );
    -webkit-background-clip: text;
    color: transparent;
  }

  .login-box {
    width: 900px;
    height: 500px;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    border-radius: 10px;
    z-index: 5;

    .login-register {
      width: 50%;
      height: 100%;
      background: transparent;
      border-radius: 10px;
      border: double 4px transparent;
      transition: all 0.5s;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .login-login {
      width: 50%;
      height: 100%;
      background: transparent;
    }

    .login-Mask {
      width: 50%;
      height: 100%;
      background: url("@/assets/image/3.jpg") no-repeat center center / cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s;
      border-radius: 10px;
    }

    // 炫酷按钮
    .btn {
      height: 50px;
      color: #53c2fe;
      // background-size: 300% 300%;
      backdrop-filter: blur(1rem);
      border-radius: 30px;
      transition: 0.5s;
      // animation: gradient_301 5s ease infinite;
      border: double 4px transparent;
      background-image: linear-gradient(#6c1818, rgb(6, 82, 82)),
        linear-gradient(
          137.48deg,
          rgb(104, 159, 183) 10%,
          #514ef5 45%,
          #8f51ea 67%,
          #0044ff 87%
        );
      background-origin: border-box;
      background-clip: content-box, border-box;
      cursor: pointer;
    }

    .title {
      font-size: 25px;
      color: linear-gradient(to right, #53c2fe, #0044ff);
      margin: 10px;
      background: linear-gradient(
        to bottom,
        #b33f3f,
        #1a5a73,
        #054851,
        #0e7785,
        #042d36
      );
      -webkit-background-clip: text;
      color: transparent;
      margin-top: 30px;
      font-weight: bold;
      text-align: center;
    }

    .box {
      width: 330px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      background: linear-gradient(
        to bottom,
        #b33f3f,
        #1a5a73,
        #054851,
        #0e7785,
        #042d36
      );
      -webkit-background-clip: text;
      color: transparent;
    }

    .login-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 60px;
    }
  }

  .musicBtn {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 10%;
    right: 2%;
    border-radius: 50%;
    z-index: 99;
    transition: all 3s;
    background: url("@/assets/image/音乐.png") no-repeat center center / 100%
      100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gradient_301 10s linear infinite;

    .btnImg {
      width: 70%;
      height: 70%;
      border-radius: 10px;
      display: none;
    }
  }
  .noanim {
    animation: none;
  }
  .musicBtn:hover {
    animation: none;
    .btnImg {
      display: block;
      transition: all 2s;
    }
  }
  //
  @keyframes gradient_301 {
    to {
      transform: rotateZ(0);
    }
    from {
      transform: rotateZ(360deg);
    }
    to {
      transform: rotateZ(0);
    }
  }
}
</style>